<template>
  <transition name="slide-fade">
    <div class="back-top" v-show="show" @click.stop="getTop">
      <img class="img1" src="@/assets/top.png" alt="">
      <img class="img2" src="@/assets/top1.png" alt="">
    </div>
  </transition>
</template>

<script>
export default {
  name: "back-top",
  data() {
    return {
      show: false
    }
  },
  methods: {
    scroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 150) {
        this.show = true
      } else {
        this.show = false
      }
    },
    getTop() {
      let timer = setInterval(() => {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        let speed = Math.ceil(scrollTop / 5)
        document.documentElement.scrollTop = scrollTop - speed
        if (scrollTop === 0) {
          clearInterval(timer)
        }
      }, 20)
    }
  },
  mounted() {
    window.addEventListener('scroll', this.scroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.scroll)
  }
}
</script>

<style scoped lang="less">
.back-top {
  position: fixed;
  right: 3rem;
  bottom: 8rem;
  cursor: pointer;
  /*opacity: .3;*/
  transition: .3s;
  text-align: center;
  z-index: 99;
}

.back-top img {
  width: 60px;
  height: 60px;
  border-radius: 30px;
}

.back-top .img2 {
  display: none;
}

.back-top:hover .img1 {
  display: none;
}

.back-top:hover img.img2 {
  display: unset;
}
</style>
